<template>
  <div class="trend-selected-graph" ref="ele">

  </div>
</template>

<script>
/*eslint-disable */
import echarts from "echarts";

export default {
  data() {
    return {
      chart: echarts.init(document.createElement("null"))
    };
  },
  props: {
    data: {
      type: Object
    }
  },
  computed: {
    opt_yAxis() {
      return {
        type: "value"
      };
    },
    opt_xAxis() {
      return {
        // data: _.range(
        //   this.data["test_id_range"][0],
        //   this.data["test_id_range"][1]
        // ),
        min: this.data["test_id_range"][0],
        max: this.data["test_id_range"][1],
        scale: true,
        type: "value",
        axisTick: {
          alignWithLabel: true //保证刻度线和标签对齐
        }
      };
    },
    opt_line_series() {
      return {
        type: "line",
        xAxisIndex: 0,
        yAxisIndex: 0,
        name: this.data["feature_name"],
        data: this.data["feature_data"].map(e => [e.test_id, e.value / 1]),
        lineStyle: {
          // color: "red",
          type: "solid",
          // $$$: "ok"
        },
        smooth:true,
        smoothMonotone:"x"
      };
    },
    opt_test_series() {
      return {
        type: "bar",
        xAxisIndex: 0,
        yAxisIndex: 0,
        name: "tet",
        data: [[18507, 0], [18707, 10], [18807, 25]],
        lineStyle: {
          // color: "#FF0080",
          type: "solid",
          $$$: "ok"
        },
        itemStyle: {
          // color: "#ff0080"
        }
      };
    },
    opt_echarts() {
      return {
        grid: {
          left: 30,
          right: 30,
          bottom: 50,
          top: 30
        },
        tooltip: {
          trigger: "axis",
          formatter:function (params) {
            if(params[0]){
              let test_id = params[0].data[0];
              let value = params[0].data[1];
              return `${test_id}<br>${params[0].seriesName} : ${value}`
            }
          }
        },
        legend: {},
        xAxis: [this.opt_xAxis],
        yAxis: [this.opt_yAxis],
        series: [
          this.opt_line_series
          // this.opt_test_series
        ]
      };
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs["ele"]);
    this.chart.setOption(this.opt_echarts);
  },
  watch: {
    opt_echarts(val) {
      this.chart.clear();
      this.chart.setOption(val);
    }
  }
};
</script>

<style lang="scss">
.trend-selected-graph {
  height: 218px;
  width: 1294px;
  flex-basis: 1294px;
  // display: inline-block;
  float: left;
}
</style>
